<template>
    <page-main>
  <div class="page-login page-register">
        <van-form>
            <van-field
                v-model="form.phone"
                placeholder="输入手机号"
                left-icon="phone-o"
            />
            <van-field
                v-show="tabs.active == 'sms'"
                v-model="form.sms"
                center
                clearable
                type="number"
                placeholder="请输入短信验证码"
                left-icon="chat-o"
            >
                <template #button v-show="tabs.active == 'sms'">
                    <span @click="sendSms" v-show="!countDown.isStart">获取验证码</span>
                    <van-count-down v-show="countDown.isStart" ref="countDown" format="ss" :time="countDown.time" @finish="sendFinish" :auto-start="false"/>
                </template>
            </van-field>
            <van-field
                v-model="form.password"
                type="password"
                placeholder="设置登录密码"
                left-icon="bag-o"
            />
            <van-field
                v-model="form.repassword"
                type="password"
                placeholder="再次输入密码"
                left-icon="bag-o"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" @submit="submitRegister">注册</van-button>
            </div>
        </van-form>
        <div class="bottom">
            <div>
                <p>注册即表示已阅读并同意<span>《驾驶员体检用户服务协议》</span></p>
            </div>
        </div>        
  </div>
  </page-main>
</template>

<script>
export default {
    data(){
        return{
            tabs:{
                active: 'sms',
                list:[
                    {name: 'sms', title: '验证码登录'},
                    {name: 'pwd', title: '密码登录'},
                ]
            },
            form:{
                phone: null,
                sms: null,
                password: null,
                repassword: null
            },
            countDown:{
                isStart: false,
                time: 60 * 1000
            },
        }
    },
    methods:{
        changeTabs(val){
            // if(val == 'pwd'){
            //     this.$refs.countDown.reset();
            //     this.countDown.isStart = false;
            // }
        },
        sendSms(){
            if(!this.$verify.phone(this.form.phone, '请输入正确的手机')){
                return;
            }
            this.$refs.countDown.start();
            this.countDown.isStart = true;
        },
        sendFinish(){
            this.countDown.isStart = false;
        },
        submitRegister(){

        },
    }
}
</script>

<style>

</style>